<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/fabric@5.0.0/dist/fabric.min.js"></script>
</head>
<style>
    canvas {
        visibility: hidden;
    }
</style>

<body>
</body>
<script>
    let objects = [
        {
            "type": "image",
            "version": "4.5.1",
            "originX": "left",
            "originY": "top",
            "left": -580,
            "top": -477,
            "width": 2700,
            "height": 1800,
            "fill": "rgb(0,0,0)",
            "stroke": null,
            "strokeWidth": 0,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": false,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "#fff",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "cropX": 0,
            "cropY": 0,
            "id": "workarea",
            "name": "",
            "file": null,
            "src": "",
            "link": {},
            "tooltip": {
                "enabled": false
            },
            "layout": "fixed",
            "workareaWidth": 2700,
            "workareaHeight": 1800,
            "crossOrigin": null,
            "filters": []
        },
        {
            "type": "image",
            "version": "4.5.1",
            "originX": "left",
            "originY": "top",
            "left": -580,
            "top": -477,
            "width": 900,
            "height": 900,
            "fill": "rgba(0, 0, 0, 1)",
            "stroke": "rgba(255, 255, 255, 0)",
            "strokeWidth": 0,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": true,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "cropX": 0,
            "cropY": 0,
            "id": "2af4c35a-2081-4382-831b-ee5f095aa0f4",
            "name": "gustavo-zambelli-nEvzSXBIhiU-unsplash",
            "file": null,
            "src": "https://cdn.chime.me/image/fs/user-info/2022124/9/original_ea583ac9-d92d-464e-b3f0-5a2c88af12a9.png",
            "link": {
                "enabled": false,
                "type": "resource",
                "state": "new",
                "dashboard": {}
            },
            "tooltip": {
                "enabled": true,
                "type": "resource",
                "template": "<div>{{message.name}}</div>"
            },
            "animation": {
                "type": "none",
                "loop": true,
                "autoplay": true,
                "duration": 1000
            },
            "userProperty": {},
            "trigger": {
                "enabled": false,
                "type": "alarm",
                "script": "return message.value > 0;",
                "effect": "style"
            },
            "variable": [
                "business",
                "#company_logo#"
            ],
            "editable": true,
            "crossOrigin": "anonymous",
            "filters": []
        },
        {
            "type": "image",
            "version": "4.5.1",
            "originX": "left",
            "originY": "top",
            "left": -580,
            "top": 423,
            "width": 900,
            "height": 900,
            "fill": "rgba(0, 0, 0, 1)",
            "stroke": "rgba(255, 255, 255, 0)",
            "strokeWidth": 0,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": true,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "cropX": 0,
            "cropY": 0,
            "id": "80b7994b-3d6d-4c35-ad6b-f744f942de80",
            "name": "ralph-ravi-kayden-2d4lAQAlbDA-unsplash",
            "file": null,
            "src": "https://cdn.chime.me/image/fs/user-info/2022124/9/original_03464980-1d60-4bb8-aa40-6e6bcb7590cd.png",
            "link": {
                "enabled": false,
                "type": "resource",
                "state": "new",
                "dashboard": {}
            },
            "tooltip": {
                "enabled": true,
                "type": "resource",
                "template": "<div>{{message.name}}</div>"
            },
            "animation": {
                "type": "none",
                "loop": true,
                "autoplay": true,
                "duration": 1000
            },
            "userProperty": {},
            "trigger": {
                "enabled": false,
                "type": "alarm",
                "script": "return message.value > 0;",
                "effect": "style"
            },
            "variable": [
                "business",
                "#company_logo#"
            ],
            "editable": true,
            "crossOrigin": "anonymous",
            "filters": []
        },
        {
            "type": "image",
            "version": "4.5.1",
            "originX": "left",
            "originY": "top",
            "left": 1125.88,
            "top": -456.41,
            "width": 1000,
            "height": 1800,
            "fill": "rgba(0, 0, 0, 1)",
            "stroke": "rgba(255, 255, 255, 0)",
            "strokeWidth": 0,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": true,
            "strokeMiterLimit": 4,
            "scaleX": 0.99,
            "scaleY": 0.99,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "cropX": 0,
            "cropY": 0,
            "id": "91423925-f92e-43ea-93d2-78b3ca0ecf7b",
            "name": "pixasquare-4ojhpgKpS68-unsplash",
            "file": null,
            "src": "https://cdn.chime.me/image/fs/user-info/2022124/9/original_0293ce3a-0967-4498-be30-30487d1788bc.png",
            "link": {
                "enabled": false,
                "type": "resource",
                "state": "new",
                "dashboard": {}
            },
            "tooltip": {
                "enabled": true,
                "type": "resource",
                "template": "<div>{{message.name}}</div>"
            },
            "animation": {
                "type": "none",
                "loop": true,
                "autoplay": true,
                "duration": 1000
            },
            "userProperty": {},
            "trigger": {
                "enabled": false,
                "type": "alarm",
                "script": "return message.value > 0;",
                "effect": "style"
            },
            "variable": [
                "business",
                "#company_logo#"
            ],
            "editable": true,
            "crossOrigin": "anonymous",
            "filters": []
        },
        {
            "type": "textbox",
            "version": "4.5.1",
            "originX": "left",
            "originY": "top",
            "left": 355.15,
            "top": -335.61,
            "width": 1107.97,
            "height": 430.3,
            "fill": "rgba(0, 0, 0, 1)",
            "stroke": "rgba(255, 255, 255, 0)",
            "strokeWidth": 1,
            "strokeDashArray": null,
            "strokeLineCap": "butt",
            "strokeDashOffset": 0,
            "strokeLineJoin": "miter",
            "strokeUniform": true,
            "strokeMiterLimit": 4,
            "scaleX": 1,
            "scaleY": 1,
            "angle": 0,
            "flipX": false,
            "flipY": false,
            "opacity": 1,
            "shadow": null,
            "visible": true,
            "backgroundColor": "",
            "fillRule": "nonzero",
            "paintFirst": "fill",
            "globalCompositeOperation": "source-over",
            "skewX": 0,
            "skewY": 0,
            "text": "company name: #Company Name#\ncompany email:#Company Email#\ncompany address:#Company Address#\ncompany phone:#Company Phone Number#\ncompany website:#Company Website#\ncompany introduction:#Company Introduction#",
            "fontSize": 56,
            "fontWeight": "normal",
            "fontFamily": "SedgwickAve-Regular",
            "fontStyle": "normal",
            "lineHeight": 1.16,
            "underline": false,
            "overline": false,
            "linethrough": false,
            "textAlign": "left",
            "textBackgroundColor": "",
            "charSpacing": 0,
            "path": null,
            "direction": "ltr",
            "minWidth": 20,
            "splitByGrapheme": false,
            "id": "88f3cc0d-9538-41c9-852a-9a81f3ddee1c",
            "name": "New text",
            "link": {
                "enabled": false,
                "type": "resource",
                "state": "new",
                "dashboard": {}
            },
            "tooltip": {
                "enabled": true,
                "type": "resource",
                "template": "<div>{{message.name}}</div>"
            },
            "animation": {
                "type": "none",
                "loop": true,
                "autoplay": true,
                "duration": 1000
            },
            "userProperty": {},
            "trigger": {
                "enabled": false,
                "type": "alarm",
                "script": "return message.value > 0;",
                "effect": "style"
            },
            "variable": [
                "business",
                "company",
                "#Company Introduction#"
            ],
            "editable": true,
            "_textLines": [
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "n",
                    "a",
                    "m",
                    "e",
                    ":",
                    " ",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "N",
                    "a",
                    "m",
                    "e",
                    "#"
                ],
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "e",
                    "m",
                    "a",
                    "i",
                    "l",
                    ":",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "E",
                    "m",
                    "a",
                    "i",
                    "l",
                    "#"
                ],
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "a",
                    "d",
                    "d",
                    "r",
                    "e",
                    "s",
                    "s",
                    ":",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "A",
                    "d",
                    "d",
                    "r",
                    "e",
                    "s",
                    "s",
                    "#"
                ],
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "p",
                    "h",
                    "o",
                    "n",
                    "e",
                    ":",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "P",
                    "h",
                    "o",
                    "n",
                    "e",
                    " ",
                    "N",
                    "u",
                    "m",
                    "b",
                    "e",
                    "r",
                    "#"
                ],
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "w",
                    "e",
                    "b",
                    "s",
                    "i",
                    "t",
                    "e",
                    ":",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "W",
                    "e",
                    "b",
                    "s",
                    "i",
                    "t",
                    "e",
                    "#"
                ],
                [
                    "c",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "i",
                    "n",
                    "t",
                    "r",
                    "o",
                    "d",
                    "u",
                    "c",
                    "t",
                    "i",
                    "o",
                    "n",
                    ":",
                    "#",
                    "C",
                    "o",
                    "m",
                    "p",
                    "a",
                    "n",
                    "y",
                    " ",
                    "I",
                    "n",
                    "t",
                    "r",
                    "o",
                    "d",
                    "u",
                    "c",
                    "t",
                    "i",
                    "o",
                    "n",
                    "#"
                ]
            ],
            "styles": {}
        }
    ]
    const fileJson = { objects }
    console.log('fabric', fabric)
    let canvas = new fabric.Canvas(null, {})
    canvas.loadFromJSON(fileJson, function () {
        // canvas.renderAll()
        console.log('aaaa')
        let src = canvas.toDataURL({
            format: 'png',
            multiplier: 1
        })
        console.log('base64---..', src)
    })

</script>

</html>